<template>
  <Table
    ref="tableRef"
    :columns="columns"
    :data="loadData"
    :alert="false"
    bordered
    :row-key="(record) => record.id"
    :showPagination="false"
  >
    <template #operator>
      <div class="table-search">
        <div>
          <span class="table-search-box">
            <a-input v-model:value="searchValue" placeholder="请输入pod信息" style="width: 240px" allowClear>
              <template #prefix>
                <SvgIcon class="iconDef" :name="'search'" :color="'#d9d9d9'" width="16" height="16" />
              </template>
            </a-input>
          </span>
        </div>
        <div class="table-search-btn">
          <a-button class="actionBtn" type="primary" ghost @click="tableRef.refresh()">
            <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
            查询
          </a-button>

          <a-button class="actionBtn" type="primary" ghost @click="refreshData">
            <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
            重置
          </a-button>
        </div>
      </div>
    </template>
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'index'"> {{ index + 1 }} </template>
      <template v-if="column.dataIndex === 'status'"> {{ podStatusMap[record.status as PodStatus]?.text }} </template>
      <template v-if="column.dataIndex === 'action'">
        <div class="table-operation">
          <a @click="handleDetail(record)">详情</a>
          <a @click="handleViewLog(record)">查看日志</a>
        </div>
      </template>
    </template>
  </Table>
  <AppLogModal ref="appLogModalRef" @close-modal="closeModal" />
  <PodInfoDetailModal ref="podInfoDetailModalRef" title="详情-运维信息" />
</template>

<script setup lang="ts">
import { podStatusMap } from '@/settings/commonSettings';
import { PodStatus } from '@/enums/pipelineEnum';
import PodInfoDetailModal from './podInfoDetailModal.vue';
import { getPodListDataFun } from '@/api/applicationManagement';
import { useApplicationStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import AppLogModal from './appLogModal.vue';
const counterStore = useApplicationStore();
const { componentData } = storeToRefs(counterStore);

const props = defineProps({
  environmentUuid: {
    type: [String, Number],
    required: true,
  },
});

watch(
  () => props.environmentUuid,
  (newVal) => {
    nextTick(() => {
      newVal && tableRef.value.refresh(true);
    });
  },
  {
    immediate: true,
  },
);

watch(
  () => componentData,
  () => {
    nextTick(() => {
      tableRef.value.refresh(true);
    });
  },
  {
    immediate: true,
  },
);
const appLogModalRef = ref<any>(null);
const podInfoDetailModalRef = ref<any>(null);
const searchValue = ref('');
const tableRef = ref<any>(null);
const columns = [
  { dataIndex: 'index', title: '序号', align: 'center', width: 60 },
  { dataIndex: 'podName', title: 'pod信息', align: 'center' },
  { dataIndex: 'status', title: '运行状态', align: 'center' },
  { dataIndex: 'ready', title: '就绪状态', align: 'center' },
  { dataIndex: 'createTime', title: '创建时间', align: 'center' },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 160,
  },
];

const loadData = async () => {
  if (!props.environmentUuid) return;
  return await getPodListDataFun({
    environmentUuid: props.environmentUuid,
    componentLabel: componentData.value.label,
    podName: searchValue.value,
  }).then((res) => {
    return res;
  });
};

const refreshData = () => {
  searchValue.value = '';
  tableRef.value.refresh(true);
};

const handleDetail = (obj: any) => {
  podInfoDetailModalRef.value.onOpen(obj);
};

//查看日志
const handleViewLog = async (obj: any) => {
  if (!props.environmentUuid) return;
  appLogModalRef.value.showModal({ envId: props.environmentUuid, podName: obj.podName });
};

const closeModal = () => {};

const refreshTable = () => {
  tableRef.value.refresh(true);
};

defineExpose({
  refreshTable,
});
</script>

<style scoped lang="less"></style>
